<template>
	<view>
		<!-- #ifdef H5 -->
		<fui-sticky>
			<fui-nav-bar title="团队管理" @leftClick="leftClick">
				<fui-icon name="arrowleft"></fui-icon>
			</fui-nav-bar>
		</fui-sticky>
		<!-- #endif -->
		<fui-loading :isFixed="true" :isMask="true" v-if="loadingShow"></fui-loading>
		<view class="box" v-else>
			<fui-landscape :show="drShow" :position="3" @close="drShow=false">
				<view class="fui-ani__box">
					<view class="fui-flex__center fui-flex__column">
						<view class="fui-ani__title">{{drShowData?.classify}}</view>
						<view class="fui-desc">
							<rich-text :nodes="drShowData?.htmlContent"></rich-text>
						</view>
					</view>
				</view>
			</fui-landscape>
			<view class="bg">
				<view class="left">
					<view class="avatar">
						<fui-avatar size="large" :src="userInfo?.avatar"></fui-avatar>
					</view>
					<view class="userInfo">
						<view class="name">
							{{userInfo?.nickname}}
						</view>
						<view class="name">
							{{userInfo?.vipPower?.vip_name}}
						</view>
						<!-- <view class="nextlevel">
							VIP决定邀请收益! 点击了解
						</view> -->
					</view>
				</view>
			</view>
			
			<view class="yuanchart" @click.stop="direct(1)">
				<view class="big">
					<view class="chart">
						{{teamNum?.oneLower||0}}
					</view>
					<view class="text">
						一级团队
					</view>
				</view>
				<view class="smill">
					<view class="chart">
						{{teamNum?.toLower||0}}
					</view>
					<view class="text">
						二级团队
					</view>
				</view>
			</view>
			
			
			<view class="huoyue">
				<view class="zhy">
					<view class="hynum">
						{{teamNum?.allActive||0}}人
					</view>
					<view class="hytext">
						昨日活跃人数
					</view>
				</view>
				<view class="zhy">
					<view class="hynum">
						{{teamNum?.oneActive||0}}人
					</view>
					<view class="hytext">
						一级活跃人数
					</view>
				</view>
				<view class="zhy">
					<view class="hynum">
						{{teamNum?.toActive||0}}人
					</view>
					<view class="hytext">
						二级活跃人数
					</view>
				</view>
			</view>
			<view class="huoyue">
				<view class="zhy">
					<view class="hynum">
						{{teamNum?.alIValid||0}}人
					</view>
					<view class="hytext">
						总有效人数
					</view>
				</view>
				<view class="zhy">
					<view class="hynum">
						{{teamNum?.oneValid||0}}人
					</view>
					<view class="hytext">
						一级有效人数
					</view>
				</view>
				<view class="zhy">
					<view class="hynum">
						{{teamNum?.toValid||0}}人
					</view>
					<view class="hytext">
						二级有效人数
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const systemApi = uniCloud.importObject('admin-system', { customUI: true })
	import { ConfigStore } from '@/store/modules/config.js'
	const userApi = uniCloud.importObject('qc-user', { customUI: true })
	const vipApi = uniCloud.importObject('qc-vip', { customUI: true })
	import { ref, reactive, computed, nextTick } from 'vue'
	import { onLoad } from "@dcloudio/uni-app";
	import { LoginStore } from "@/store/modules/login.js";
	const userInfo = computed(() => (LoginStore().userInfo))
	const teamNum = computed(() => (ConfigStore().teamNum))

	//loading加载
	const loadingShow = ref(true)
	onLoad(async () => {
		await getInvitedTree()
		if (teamNum?.value?.length == 0) {
			const res = await userApi.getInvitedTree({ user_id: userInfo.value._id })
			teamNum.value = res.data
		}
		if (teamNum?.value) {
			loadingShow.value = false
		}
	})
	//获取团队人数
	const getInvitedTree = async () => {
		ConfigStore().getInvitedTree()
	}
	// #ifdef H5
	const leftClick = () => {
		uni.navigateBack()
	}
	// #endif

	//直推
	const direct = (id) => {
		uni.fui.href(`/pages/user/team/direct?level=${id}`)
	}
</script>

<style lang="scss" scoped>
	.fui-ani__box {
		width: 640rpx;
		background: #ff6553;
		border-radius: 24rpx;
		padding: 20rpx;
	}
	
	.fui-hd__img {
		width: 100%;
		height: 192rpx;
		display: block;
	}
	.fui-ani__title {
		font-size: 36rpx;
		font-weight: 600;
		padding-bottom: 20rpx;
		text-align: center;
		color: #fff;
	}
	
	.fui-desc {
		width: 95%;
		padding: 20rpx 40rpx 20rpx;
		margin-bottom: 20rpx;
		font-size: 24rpx;
		line-height: 48rpx;
		font-weight: 400;
		color: #333333;
		box-sizing: border-box;
		max-height: 600rpx;
		overflow: hidden;
		overflow-y: scroll;
		border-radius: 24rpx;
		background-color: #fff;
	}
	.direct {
		padding: 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.direct_item1 {
		display: flex;
		flex-direction: column;
		text-align: center;
		padding: 32rpx 0 32rpx 0;
		width: 30%;
		border-radius: 20rpx;
		background-color: #fff;
	}

	.direct_item {
		text-align: center;
		width: 22%;
		padding: 32rpx;
		border-radius: 20rpx;
		background-color: #fff;
	}

	.tjr {
		display: flex;
		border-radius: 20rpx;
		align-items: center;
		justify-content: space-between;
		margin: 32rpx;
		padding: 32rpx;
		color: #fff;
		background-color: var(--fui-color-primary);
	}

	.huoyue {
		display: flex;
		justify-content: space-around;
		margin: 32rpx;
		background-color: #fff;
		padding: 32rpx 0 32rpx 0;
		border-radius: 20rpx;
	}

	.hynum {
		text-align: center;
		font-size: 40rpx;
		font-weight: 300;
	}

	.hytext {
		font-size: 26rpx;
		color: var(--fui-color-subtitle);
		margin-top: 10rpx;
	}

	.gxz {
		border-radius: 20rpx;
		margin: 32rpx;
		background-color: #fff;
		padding: 32rpx;
	}

	.box {
		height: 300rpx;
		background-color: var(--fui-color-primary);
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
	}

	.text {
		padding: 22rpx;
		font-size: 28rpx;
	}

	.yuanchart {
		position: relative;
		padding: 32rpx;
		display: flex;
		justify-content: space-around;
		background-color: #fff;
		margin: 32rpx;
		align-items: center;
		border-radius: 20rpx;
	}

	.chart {
		text-align: center;
		padding: 22rpx;
		font-size: 40rpx;
		font-weight: 900;
	}

	.bg {
		position: relative;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 32rpx;
	}

	.left {
		display: flex;
	}

	.userInfo {
		margin-left: 30rpx;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
	}
</style>